<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        {{message}}
        <hr>
        {{arr}}
        <button v-on:click="sub(1,2,$event)">按钮</button>
        <!-- <button onclick="myfn()">按钮二</button> -->
        <button @click="fn">按钮二</button>
        <hr>
        <div v-bind:class="boxstr">我是box div</div>
        <div :class="boxstr" >我是box div2222</div>
        <button @click="changebg">点击我</button>
        <hr>
        <!-- 动态类名 -->
        <!-- <div :class="boxstr+' '+boxstr2">55555</div>
        <div :class="[boxstr,boxstr2]">6666</div>
        <div :class="{box:true,active:false}">7777</div> -->
        <!-- 动态style -->
        <div :style="mystyle1">1111</div>
        <div :style="[mystrobj,mystrobj2]">2222</div>
        <div :style="{width:'200px',height:'200px',background:'yellow'}">33333</div>
    </div> 
    <script>
        // function myfn(){
        //     console.log(3333)
        // }
        // 一、v-on ：绑定事件  事件方法会写在一个 预定义的methods里
        // 1.v-on 可以简写成 @ 符号 2.事件函数可以加括号 也可以不加括号
        // 3.事件函数里可以更改数据
        // 二、v-bind: 简写  :  动态属性 ,一旦变成动态属性后，后面是类js环境
        // class 和  style ：支持 字符串 数组 对象
        new Vue({
            el:"#app",
            data:{
                mystrobj:{
                    width:"100px",
                    height:"100px",
                    background:"blue"
                },
                mystrobj2:{
                   border:"5px solid"
                },
                mystyle1:"width:100px;height:100px;background:red",
                boxstr:"box",
                boxstr2:"active",
                message:"数据",
                arr:[1,2,3]
            },
            methods:{
                sub(a,b,e){
                    console.log("11111",e);
                },
                fn(arg){
                    // console.log(2222,arg);
                    // this.message = "修改了";
                    // this.arr[1] = "修改了";
                    // console.log(this.arr);
                    this.$set(this.arr,1,"修改了");
                },
                changebg(){
                    this.boxstr = "box2"
                }
            }   
        })

    //练习： 通过vue 实现选项卡 

    </script>
</body>
</html>